<style lang="scss"></style>

<script>
import dayjs from 'dayjs'
import PatrolPlanForm from './patrolPlanForm/index.vue'
import { createPatrolPlan } from '@/api/watchman'

export default {
  components: {
    PatrolPlanForm
  },
  props: {
    value: {
      type: Boolean,
      required: true,
      default: false
    },
    title: {
      type: String,
      required: false,
      default: '创建巡防班次'
    },
    confirmText: {
      type: String,
      required: false,
      default: '保存'
    },
    cancelText: {
      type: String,
      required: false,
      default: '取消'
    }
  },
  data() {
    return {
      dialog: {},
      form: {
        form: {
          name: '',
          beginTime: null,
          endTime: null,
          points: []
        },
        plans: []
      },
      isSavingPlans: false
    }
  },
  computed: {
    dialogVisible: {
      get: function() {
        return this.value
      },
      set: function(visible) {
        this.$emit('input', visible)
      }
    },
    patrolPlansSorted() {
      return this.form.plans.concat().sort((range1, range2) => {
        return range1.beginTime.getTime() - range2.endTime.getTime()
      })
    }
  },
  methods: {
    closeDialog() {
      if (this.isSavingPlans) { return }

      this.dialogVisible = false
    },
    sleep(t) {
      return new Promise(r => setTimeout(r, t))
    },
    isObject(o) {
      return Object.prototype.toString.call(o) === '[object Object]'
    },

    buildParams() {
      const { form: { form }, patrolPlansSorted } = this

      const plans = patrolPlansSorted.map(plan => {
        const { beginTime, endTime, points } = plan
        return {
          start_time: dayjs(beginTime).format('HH:MM:ss'),
          end_time: dayjs(endTime).format('HH:MM:ss'),
          drop: points.map(item => {
            return { name: item.name }
          })
        }
      })

      const params = {
        name: form.name,
        times: JSON.stringify(plans)
      }

      return params
    },
    async savePlans() {
      try {
        const flag = await this.$refs?.patrolPlanForm.validate()
        if (!flag) {
          console.log(flag)
          return
        }
        this.isSavingPlans = true
        await this.sleep(300)

        const params = this.buildParams()
        await createPatrolPlan(params)

        this.isSavingPlans = false
        this.closeDialog()
        this.$refs.patrolPlanForm?.resetForm?.()

        this.$emit('success')
      } catch (err) {
        this.isSavingPlans = false
        this.$message.error(err.message)
      }
    }
  }
}

</script>

<template>
  <el-dialog :title="title" :visible.sync="dialogVisible" :close-on-click-modal="false"
  :before-close="closeDialog" width="35%" destroy-on-close>
    <div v-loading="isSavingPlans" class="body">
      <PatrolPlanForm ref="patrolPlanForm" v-model="form" />
    </div>

    <div slot="footer">
      <el-button type="primary" :loading="isSavingPlans" :disabled="isSavingPlans" @click="savePlans">
        {{ confirmText }}
      </el-button>

      <el-button :disabled="isSavingPlans" @click="closeDialog">
        {{ cancelText }}
      </el-button>
    </div>
  </el-dialog>
</template>
